<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
	<%@ page import="vn.fpt.fsoft.entity.User" %>
<%@ taglib prefix="decorator"
	uri="http://claudiushauptmann.com/jsp-decorator/"%>
	<%@ page import="vn.fpt.fsoft.entity.User" %>

<decorator:decorate filename="MasterPage.jsp">
	<decorator:content placeholder="title">List Govement Office Region</decorator:content>
	<decorator:content placeholder="head">
		<link rel="stylesheet" href="css/jq.css" type="text/css" media="print, projection, screen" />
		<link rel="stylesheet" href="css/style-tablesort.css" type="text/css" media="print, projection, screen" />
		<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
		<script type="text/javascript" src="js/jquery.tablesorter.pager.js"></script>
		<script type="text/javascript" src="js/docs.js"></script>
		<script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="http://bootboxjs.com/bootbox.js"></script>
		<link rel="stylesheet" href="css/style-homepage.css" type="text/css">

		<script type="text/javascript">
			function logout() {
				$.ajax({
					url : "UserController?action=logout",
					type : "POST",
					success : function(data) {
					},
					error : function(data) {
					}
				});
				return true;
			}
			function Click_Record(govOffRegionID, isActive) {
				if (!isActive) {
					bootbox.confirm("Do you want to make this Government Office Region active?",
						function(result) {
							if (result) {
								var check = $("#checkActive").prop("checked");
								$.ajax({
									url : "ListGovOfficeRegionController?govofficetregionid="+ govOffRegionID
										+ "&isactive="+ isActive
										+ "&checked="+ check,
									type : "POST",
									success : function(data) {
										load(data);
									},
									error : function(data) {
										alert("Fail");
									}
								});
							}
					});
				} else {
					bootbox.dialog({
						message : "What do you want operation?",
						buttons : {
							inactive : {
								label : "In-active",
								className : "btn-unactive",
								callback : function() {
									var check = $("#checkActive").prop("checked");
									$.ajax({
										url : "ListGovOfficeRegionController?govofficetregionid="+ govOffRegionID
											+ "&isactive="+ isActive
											+ "&checked="+ check,
										type : "POST",
										success : function(data) {
											load(data);
										},
										error : function(data) {
											alert("Fail");
										}
									});
								}
							},
							upadate : {
								label : "Update",
								className : "btn-upadte",
								callback : function() {
									window.location.replace("UpdateGovOfficeRegion.jsp?govofficeregionid="+ govOffRegionID
											+ "&isactive="+ isActive);
								}
							},
							view : {
								label : "View",
								className : "btn-view",
								callback : function() {
									window.location.replace("ViewDetailGovOfficeRegion.jsp?govofficeregionid="+ govOffRegionID
											+ "&isactive="+ isActive);
								}
							},
							cancel : {
								label : "Cancel",
								className : "btn-cancel",
							}
						}
					});
				}
			}

			//Xu ly json ben controller truyen qua
			function load(data) {
				var data1 = JSON.parse(data);
				var length = data1.GovOfficeRegion.length;
				var result = "<table id=table cellspacing=1 class=tablesorter>";
				result += "<thead>";
				result += "<tr>";
				result += "<th>Gov Office Region Name</th>";
				result += "<th>Description</th>";
				result += "<th>County</th>";
				result += "<th>Is Active?</th>";
				result += "</tr>";
				result += "</thead>";
				result += "<tbody>";
				$("#datatable").empty();
				for (var i = 0; i < length; i++) {
					result += "<tr onclick=Click_Record("
							+ data1.GovOfficeRegion[i].GovOfficeRegionID + ","
							+ data1.GovOfficeRegion[i].IsActive + ");>";
					result += "<td>"
							+ data1.GovOfficeRegion[i].GovOfficeRegionName
							+ "</td>";
					if(data1.GovOfficeRegion[i].Description == null){
						result += "<td>No description</td>";
					}else{
					result += "<td>" + data1.GovOfficeRegion[i].Description
							+ "</td>";
					}
					result += "<td>" + data1.GovOfficeRegion[i].CountyName
							+ "</td>";
					if (data1.GovOfficeRegion[i].IsActive) {
						result += "<td>Yes</td>";
					} else {
						result += "<td>No</td>";
					}
					result += "</tr>";
				}
				result += "</tbody>";
				result += "</table>";
				result += "<div id=pager class=pager style=right:5px;float:right;>";
				result += "<form>";
				result += "<img src=img/first.png class=first />";
				result += "<img src=img/prev.png class=prev />";
				result += " <input type=text class=pagedisplay size=5 style=\"width: 63px; height: 20px\"/>";
				result += "<img src=img/next.png class=next />";
				result += "<img src=img/last.png class=last />";
				result += "<select class=pagesize style=visibility:hidden;>";
				result += "<option selected=selected  value=15></option>";
				result += "</select>";
				result += "</form>";
				result += "</div>";
				$("#datatable").append(result);
				$("#table").tablesorter({
					widthFixed : true,
					widgets : [ 'zebra' ]
				}).tablesorterPager({
					container : $("#pager")
				});
				$("#pager").css("position", "static");
			}

			//Load du lieu theo dieu kien
			$(document).ready(function() {
				//Loc danh sach theo dieu kien
				$("a").click(function() {
					var cond = $(this).attr("id");
					var check = $("#checkActive").prop("checked");
					$.ajax({
						url : "ListGovOfficeRegionController?condition="+ cond
							+ "&checked="+ check,
						type : "POST",
						success : function(data) {
							load(data);
						},
						error : function(data) {

						}
					});
				});

				//Xu ly khi click checkbox
				$("#checkActive").click(function() {
					var check = $("#checkActive").prop("checked");
					$.ajax({
						url : "ListGovOfficeRegionController?checked="+ check,
						type : "POST",
						success : function(data) {
							load(data);
						},
						error : function(data) {
							alert("Fail");
						}
					});
				});
			});

			//Load trang
			$(window).load(function() {
				$.ajax({
					url : "ListGovOfficeRegionController?checked=false",
					type : "POST",
					success : function(data) {
						load(data);
					},
					error : function(data) {
						alert("Fail");
					}
				});
			});

			function Click_Create() {
				window.location.replace("AddGovOfficeRegion.jsp");
			}
		</script>

	</decorator:content>
	<decorator:content placeholder="body">
	<%
		User user = (User) request.getSession().getAttribute("user");
		if(user == null) {
		    response.sendRedirect("login.jsp");
		}
	%>
		<div style="width: 795px">
			<div id="manager_nav">
				<label
					style="font-size: x-large;; color: green; margin-left: 1.5%; font-weight: bold;">
					Government Office Region List</label>
				<ul>
					<li><a href="#" id="all">All</a></li>
					<li>|</li>
					<li><a href="#" id="digital">0 - 9</a></li>
					<li>|</li>
					<li><a href="#" id="ae">A B C D E</a></li>
					<li>|</li>
					<li><a href="#" id="fj">F G H I J</a></li>
					<li>|</li>
					<li><a href="#" id="kn">K L M N</a></li>
					<li>|</li>
					<li><a href="#" id="or">O P Q R</a></li>
					<li>|</li>
					<li><a href="#" id="sv">S T U V</a></li>
					<li>|</li>
					<li><a href="#" id="wz">W X Y Z</a></li>
				</ul>
			</div>
			<div id="manager_action">
				<a href="#" style="text-decoration: none">
					<input type="button" value="Create" onclick="Click_Create();" /></a>&nbsp; 
					<input type="checkbox" id="checkActive">
						<span style="color: gray; font-weight: bold">Include in-active</span>
			</div>
			<br>
			<div id="datatable"></div>
		</div>

	</decorator:content>
</decorator:decorate>